<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <link th:href="@{/js/el/element.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.js}" type="text/javascript"></script>
    <title>博客后台</title>
    <style>
        #header{
            margin-top: 0px;
            height: 102px;
            vertical-align: middle;
            padding-top: 0px;
        }
        .w-e-menu{
            z-index: 2 !important;
        }
        .w-e-text-container{
            z-index: 1 !important;
        }
        .post{
            font-family: Arial;
            font-size: 12px;
            line-height: 150%;
            border-bottom: none;
            margin-top: 0px;
            padding-top: 0px;
            margin-right: 0px;
            padding-right: 0px;
        }
        h2{
            color: #FFF;
            margin-bottom: 2px;
            margin-top:0px;
            background-color: #6B86B3;
            border-bottom: 1px solid #666;
            border-top: 1px solid #666;
            padding-top: 3px;
            padding-bottom: 3px;
            font-family: Verdana;
            font-size: 12px;
            text-align: center;
            text-transform: uppercase;
            font-weight:normal;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="header">
        <div id="logo">
            <h1>
                个人中心
            </h1>
            用户名:<span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.nickname}"></span>
            &nbsp;&nbsp;&nbsp;<a href="/logout">退出</a>
        </div>
        <hr>
    </div>
    <div style="display: flex; margin-left: 2vw;margin-right: 2vw; height: 100vw;margin-top: 60px;">
        <div style="height: 100%; width: 20%;">
            <div style="margin-left: 2%; height: 100%; flex: 1;">
                <el-menu :router=true text-color="#333333" active-text-color="#3946ff" :unique-opened="true"
                         style="height: 100%;">
                    <el-menu-item @click="index()">首页</el-menu-item>
                    <el-menu-item @click="type()">类别管理</el-menu-item>
                    <el-menu-item @click="cblog()">博客管理</el-menu-item>
                    <el-menu-item @click="boke()">发表博客</el-menu-item>
                </el-menu>
            </div>
        </div>
        <div style="width:78%; padding-left: 2%;">
            <div v-show="show==0">
            <h3>
                添加博客
            </h3>
            <div>
                <el-input type="text" style="width: 100%" placeholder="请输入标题..." v-model="blog.title"></el-input>
            </div>
            <div id="editor" class="editor">
            </div>
            <hr>
            <h3>
                博客类别
            </h3>
            <el-select v-model="blog.typeId" placeholder="请选择">
                <el-option v-for="obj in blogtypes"  :label="obj.type" :value="obj.id">
                </el-option>
            </el-select>
            <hr>
            <el-button type="primary" @click="summit()">提交</el-button>
            </div>
            <div v-show="show==1">
                <h3>
                类别添加
                </h3>
                <el-input
                placeholder="请输入类别"
                v-model="blogtype.type"
                clearable>
                </el-input>
                <hr>
                <el-button type="primary" @click="addType()">提交</el-button>
            </div>
            <div v-show="show==2">
                <h2>
                    我的博客
                </h2>
                <div class="post" v-for="obj in blogs">
                    <h3>
                        {{obj.title}}
                    </h3>
                    <h4 >
                            {{obj.digest}}
                            &nbsp;&nbsp;
                            <a href="#" @click="read(obj.id)">阅读全文</a>
                        <a href="#" @click="del(obj)">删除</a>
                        <p class="postfoot" align="right">
                            发布时间:{{obj.tpress}}&nbsp;
                            作者:{{obj.author}}&nbsp;
                            阅读:{{obj.pageviews}}&nbsp;
                        </p>
                    </h4>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            user:{},
            editor: null,
            blog:{},
            blogtypes:[],
            blogtype:{},
            show:0,
            blogs:[]
        },
        methods:{
            init: function () {
                var E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.config.uploadImgShowBase64 = true
                // 图片上传格式
                // 隐藏网络图片, 把图片转成 base 64
                this.editor.config.pasteFilterStyle = false
                // 自定义颜色
                this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                // 配置字体
                this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                //创建
                this.editor.create();
                // 富文本内容
                this.editor.txt.html();
            },
            summit: function() {
                console.log(this.editor.txt.html());
                console.log("this.editor.txt.text()==");
                console.log(this.editor.txt.text());
                this.blog.body = this.editor.txt.html();
                this.blog.digest = this.editor.txt.text();
                var that = this;
                axios.post("/client/addBlog",this.blog).then(function (resp) {
                    alert("添加成功")
                })
            },
            addType(){
                var that = this
                axios.post("/public/addBlogType",that.blogtype).then(function (resp) {
                    axios.get("/public/findAllBlogTypes").then(function (resp) {
                        that.blogtypes = resp.data.data
                        alert("添加成功")
                    })
                })
            },
            boke(){
                var that = this
                this.show = 0;
                axios.get("/public/findAllBlogTypes").then(function (resp) {
                    that.blogtypes = resp.data.data
                })
            },
            type(){
                this.show = 1;
            },
            cblog(){
                var that = this
                this.show = 2;
                axios.get("/client/findBlogsByUid").then(function (resp) {
                    that.blogs = resp.data.data
                })
            },
            index(){
                window.location.href="/public/index";
            },
            read(blogId){
                sessionStorage.setItem("blogId",blogId);
                window.location.href="/public/go2Read/"+ blogId;
            },
            del(obj){
                console.log(obj)
                var that = this
                axios.get("/client/del/"+ obj.id +"/"+ obj.typeId).then(function (resp) {
                    that.$message({
                        message: resp.data.msg,
                        type: 'success'
                    });
                    axios.get("/client/findBlogsByUid").then(function (resp) {
                        that.blogs = resp.data.data
                    })
                })
            }
        },
        mounted: function () {
            this.init();
            var that = this
            axios.get("/public/findAllBlogTypes").then(function (resp) {
                that.blogtypes = resp.data.data
            })
            axios.get("/client/findBlogsByUid").then(function (resp) {
                that.blogs = resp.data.data
            })
        }
    })
</script>
</html>